<template>
    <LyFrame class="container">
        <LySwitch class="page-switch">
            <LyBox id="box0" class="page-box" v-model="cacheFocusBox0" #default="{ isBoxFocus, cacheId }">
                <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                    <text-view :class="{
                        'widtext': true,
                        'is-focus': isFocus,
                        'def-focus': !isFocus,
                        'is-cache': isCache,
                        'def-cache': !isCache,
                    }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
                </LyWidget>
                <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                    <text-view :class="{
                        'widtext': true,
                        'is-focus': isFocus,
                        'def-focus': !isFocus,
                        'is-cache': isCache,
                        'def-cache': !isCache,
                    }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
                </LyWidget>
                <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                    <text-view :class="{
                        'widtext': true,
                        'is-focus': isFocus,
                        'def-focus': !isFocus,
                        'is-cache': isCache,
                        'def-cache': !isCache,
                    }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
                </LyWidget>
                <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                    <text-view :class="{
                        'widtext': true,
                        'is-focus': isFocus,
                        'def-focus': !isFocus,
                        'is-cache': isCache,
                        'def-cache': !isCache,
                    }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
                </LyWidget>
                <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                    <text-view :class="{
                        'widtext': true,
                        'is-focus': isFocus,
                        'def-focus': !isFocus,
                        'is-cache': isCache,
                        'def-cache': !isCache,
                    }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
                </LyWidget>
            </LyBox>
            <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                <text-view :class="{
                    'widtext': true,
                    'is-focus': isFocus,
                    'def-focus': !isFocus,
                    'is-cache': isCache,
                    'def-cache': !isCache,
                }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
            </LyWidget>
            <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                <text-view :class="{
                    'widtext': true,
                    'is-focus': isFocus,
                    'def-focus': !isFocus,
                    'is-cache': isCache,
                    'def-cache': !isCache,
                }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
            </LyWidget>
            <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                <text-view :class="{
                    'widtext': true,
                    'is-focus': isFocus,
                    'def-focus': !isFocus,
                    'is-cache': isCache,
                    'def-cache': !isCache,
                }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
            </LyWidget>
            <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                <text-view :class="{
                    'widtext': true,
                    'is-focus': isFocus,
                    'def-focus': !isFocus,
                    'is-cache': isCache,
                    'def-cache': !isCache,
                }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
            </LyWidget>
            <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                <text-view :class="{
                    'widtext': true,
                    'is-focus': isFocus,
                    'def-focus': !isFocus,
                    'is-cache': isCache,
                    'def-cache': !isCache,
                }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
            </LyWidget>
            <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                <text-view :class="{
                    'widtext': true,
                    'is-focus': isFocus,
                    'def-focus': !isFocus,
                    'is-cache': isCache,
                    'def-cache': !isCache,
                }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
            </LyWidget>
            <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                <text-view :class="{
                    'widtext': true,
                    'is-focus': isFocus,
                    'def-focus': !isFocus,
                    'is-cache': isCache,
                    'def-cache': !isCache,
                }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
            </LyWidget>
            <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                <text-view :class="{
                    'widtext': true,
                    'is-focus': isFocus,
                    'def-focus': !isFocus,
                    'is-cache': isCache,
                    'def-cache': !isCache,
                }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
            </LyWidget>
            <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                <text-view :class="{
                    'widtext': true,
                    'is-focus': isFocus,
                    'def-focus': !isFocus,
                    'is-cache': isCache,
                    'def-cache': !isCache,
                }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
            </LyWidget>
            <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                <text-view :class="{
                    'widtext': true,
                    'is-focus': isFocus,
                    'def-focus': !isFocus,
                    'is-cache': isCache,
                    'def-cache': !isCache,
                }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
            </LyWidget>
            <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                <text-view :class="{
                    'widtext': true,
                    'is-focus': isFocus,
                    'def-focus': !isFocus,
                    'is-cache': isCache,
                    'def-cache': !isCache,
                }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
            </LyWidget>
            <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                <text-view :class="{
                    'widtext': true,
                    'is-focus': isFocus,
                    'def-focus': !isFocus,
                    'is-cache': isCache,
                    'def-cache': !isCache,
                }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
            </LyWidget>
            <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                <text-view :class="{
                    'widtext': true,
                    'is-focus': isFocus,
                    'def-focus': !isFocus,
                    'is-cache': isCache,
                    'def-cache': !isCache,
                }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
            </LyWidget>
            <LyWidget class="my-widget" #default="{ isFocus, isCache }">
                <text-view :class="{
                    'widtext': true,
                    'is-focus': isFocus,
                    'def-focus': !isFocus,
                    'is-cache': isCache,
                    'def-cache': !isCache,
                }" :text="'isFocus=' + isFocus + '-isCache=' + isCache"></text-view>
            </LyWidget>
        </LySwitch>
    </LyFrame>
</template>
<script>
import { LyFrame, LySwitch, LyBox, LyWidget } from "@/hippy-focus";
export default {
    name: "index",
    components: {
        LyFrame,
        LySwitch,
        LyBox,
        LyWidget,
    },
    data() {
        return {
            cacheFocusBox0: "",
        };
    },
    created() {

    },
    mounted() {

    },
    computed: {

    },
    beforeDestroy() {

    },
    methods: {

    },
    watch: {

    },
};
</script>
<style lang="less" scoped>
.container {
    height: 1080px;

    .page-switch {
        height: 1080px;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .page-box {
        width: 1920px;
        height: 300px;
        flex-direction: row;
        flex-wrap: wrap;
        border: 1px solid red;
    }

    .my-widget {
        width: 100px;
        height: 100px;
        margin: 20px;

        .widtext {
            border-width: 1px;
            border-style: solid;
            height: 100px;
        }
    }

    .def-cache {
        background-color: blueviolet;
    }

    .is-cache {
        background-color: red;
    }

    .def-focus {
        transform: scale(1);
    }

    .is-focus {
        transform: scale(1.1);
    }
}
</style>
